<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="系统用户数" :total="this.userData[4] | NumberFormat">
          <a-tooltip title="系统中用户账号数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="优待用户数" :total="this.userData[2] | NumberFormat">
          <a-tooltip title="所有优待证数量,包括已认证和未认证" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="商家联盟数" :total="this.userData[5] | NumberFormat">
          <a-tooltip title="全市联盟商家数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <div class="salesCard">
        <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
          <a-tabs
            default-active-key="1"
            size="large"
            :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }"
            style="background-color: white"
          >
            <a-tab-pane loading="true" tab="用户数据分析" key="1">
              <a-row>
                <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                  <a-row>
                    <bar title="用户年龄分布" :dataSource="barData1" />
                  </a-row>
                  <a-row>
                    <bar title="用户性别分布" :dataSource="barData2" />
                  </a-row>
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </div>
      <a-col
        :sm="24"
        :md="12"
        :xl="8"
        :style="{ marginBottom: '2px' }"
        style="background-color: white; padding-left: 2upx"
      >
        <div class="main1" id="main1" style="width: 90%; height: 750px"></div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }"
          style="background-color: white"
        >
          <a-tab-pane loading="true" tab="优待数据分析" key="1">
            <a-row>
              <a-col :xl="24" :lg="12" :md="12" :sm="24" :xs="24">
                <a-row>
                  <bar title="已认证优待证" :dataSource="barData3" />
                </a-row>
                <a-row>
                  <bar title="商家联盟县区分布" :dataSource="barData4" />
                </a-row>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import { getAction } from '../../api/manage'
import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo, getUserData } from '@/api/api'
import * as echarts from 'echarts'
import suqian from '../suqian.json'
const rankList = []
const barData1 = []
const barData2 = []
const barData3 = []
const barData4 = []
export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
  },
  data() {
    return {
      loading: true,
      center: null,
      rankList,
      barData1,
      barData2,
      barData3,
      barData4,
      // shuliang,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      userData: [],
      showData: 0,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
  },
  mounted() {
    this.initCharts()
  },

  methods: {
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach((key) => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then((res) => {
        if (res.success) {
          this.visitInfo = res.result
        }
      })
      getUserData().then((res) => {
        // console.log("wetewtgewtgertregreg", JSON.stringify(res))
        if (res.success) {
          this.userData[0] = res.result.utotal
          this.userData[1] = res.result.btotal
          this.userData[2] = res.result.vtotal
          this.userData[3] = res.result.vdtotal
          this.userData[4] = res.result.systotal

          this.userData[5] = res.result.sertotal
          this.userData[6] = res.result.suchengtotal
          this.userData[7] = res.result.suyutotal
          this.userData[8] = res.result.shuyangtotal
          this.userData[9] = res.result.siyangtotal
          this.userData[10] = res.result.sihongtotal
          this.userData[11] = res.result.jingkaitotal

          this.userData[12] = res.result.totall0
          this.userData[13] = res.result.total20
          this.userData[14] = res.result.total30
          this.userData[15] = res.result.total40
          this.userData[16] = res.result.total50
          this.userData[17] = res.result.total60
          this.userData[18] = res.result.total70
          this.userData[19] = res.result.total80

          barData2.push(
            {
              x: `男`,
              y: Math.floor(this.userData[1]),
            },
            {
              x: `女`,
              y: Math.floor(this.userData[0] - this.userData[1]),
            }
          ),
            barData3.push(
              {
                x: `已认证`,
                y: Math.floor(this.userData[3]),
              },
              {
                x: `未认证`,
                y: Math.floor(this.userData[2] - this.userData[3]),
              }
            ),
            barData4.push(
              {
                x: `宿城区`,
                y: Math.floor(this.userData[6]),
              },
              {
                x: `宿豫区`,
                y: Math.floor(this.userData[7]),
              },
              {
                x: `沭阳县`,
                y: Math.floor(this.userData[8]),
              },
              {
                x: `泗阳县`,
                y: Math.floor(this.userData[9]),
              },
              {
                x: `泗洪县`,
                y: Math.floor(this.userData[10]),
              },
              {
                x: `经开区`,
                y: Math.floor(this.userData[11]),
              }
            ),
            barData1.push(
              {
                x: `20岁以下`,
                y: Math.floor(this.userData[12]),
              },
              {
                x: `21-29岁`,
                y: Math.floor(this.userData[13]),
              },
              {
                x: `30-39岁`,
                y: Math.floor(this.userData[14]),
              },
              {
                x: `40-49岁`,
                y: Math.floor(this.userData[15]),
              },
              {
                x: `50-59岁`,
                y: Math.floor(this.userData[16]),
              },
              {
                x: `60-69岁`,
                y: Math.floor(this.userData[17]),
              },
              {
                x: `70-79岁`,
                y: Math.floor(this.userData[18]),
              },
              {
                x: `80岁以上`,
                y: Math.floor(this.userData[19]),
              }
            )
        }
        // console.log(this.userData)
      })
    },

    initCharts() {
      const charts = echarts.init(document.getElementById('main1'))
      let airData = [
        { name: '宿城区', value: [20716, 20] },
        { name: '宿豫区', value: [20716, 20] },
        { name: '沭阳县', value: [20047, 30] },
        { name: '泗阳县', value: [21541, 40] },
        { name: '泗洪县', value: [35649, 50] },
      ]

      const option = {
        // 背景颜色
        backgroundColor: 'white',
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: 'item', // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
          alwaysShowContent: false,
          backgroundColor: '#0C121C',
          borderColor: 'rgba(0, 0, 0, 0.16);',
          hideDelay: 100,
          triggerOn: 'mousemove',
          enterable: false,
          textStyle: {
            color: '#DADADA',
            fontSize: '12',
            width: 20,
            height: 30,
            overflow: 'break',
          },
          formatter: (params) => {
            // alert(JSON.stringify(params))
            console.log('悬浮窗时间事件', params)
            switch (params.name) {
              case '沭阳县':
                this.showData = this.userData[8]
                break
              case '宿城区':
                this.showData = parseInt(this.userData[6]) + parseInt(this.userData[11])
                break
              case '宿豫区':
                this.showData = this.userData[7]
                break
              case '泗阳县':
                this.showData = this.userData[9]
                break
              case '泗洪县':
                this.showData = this.userData[10]
                break
            }

            return `${params.name}:商家入驻${this.showData}个`
          },
          showDelay: 10,
        },
        // 地图配置
        geo: {
          map: 'suqian',
          // 地图文字
          label: {
            // 通常状态下的样式
            normal: {
              // 默认是否显示地区名称
              show: true,
              // 默认的文字样式
              textStyle: {
                color: 'black',
              },
            },
            // 鼠标放上去的文字样式
            emphasis: {
              textStyle: {
                color: 'black',
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: '#4a9de4', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#4a9de4', // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: '#83c4f3',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#0984e3',
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            data: airData,
            geoIndex: 0, //将数据和第0个geo配置关联在一起
            type: 'map',
          },
        ],
      }
      echarts.registerMap('suqian', suqian)
      charts.setOption(option)
      charts.on(
        'mouseover',
        {
          series: 0,
          // shuliang:this.userData[3]
        },
        (params) => {
          console.log('鼠标移入')
        }
      )
      // 当鼠标移出地图后
      charts.on(
        'mouseout',
        {
          series: 0,
        },
        (params) => {
          //alert("456")
          console.log('鼠标移出')
        }
      )
    },
  },
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>
